<template>
  <div>
    <!-- 轮播图 -->
    <div style="margin-top: 10px">
      <el-carousel height="500px">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <a target="_blank" :href="item.url"><img style="width: 100%" :src='item.img' alt=""></a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 公告 -->
    <div>
      <el-card>
        <div style="padding: 10px 0;margin-bottom: 20px; border-bottom: 2px solid dodgerblue; font-size: 20px; color: dodgerblue">系统公告</div>
        <div>
          <el-row>
          <el-col :span="7" v-for="(item, index) in notice" :key="item.id" :offset="index > 0 ? 1 : 0">
            <el-card :body-style="{ padding: '0px' }" class="cardStyle">
              <div style="padding: 14px;">
                <span style="font-size: 20px;">{{ item.title }}</span>
                <div style="margin-top: 10px;font-size: 15px;">{{ item.content }}</div> 
                <div style="margin-left: 100px;margin-top: 5px;">{{ item.time }}</div>              
              </div>
            </el-card>
          </el-col>
        </el-row> 
        </div>
    </el-card>
    </div>





    <!-- 中间部分 -->
    <div style="margin-top: 10px">
      <el-row :gutter="10">

        <!-- 销售排行 -->
        <el-col :span="6" style="height:650px">
          <el-card style="height:100%">
            <div style="padding: 10px 0; border-bottom: 2px solid dodgerblue; font-size: 20px; color: dodgerblue">销量排行榜</div>

            <div style="padding: 10px 0;" >
              <el-row v-for="(item, index) in sales" :key="item.id" type="flex" :gutter="10">
                <div style="padding: 10px 0; cursor: pointer;position: relative;top: 50%;border-bottom: 1px dashed black;" 
                @click="goodsDetail(item.id)">
                  <el-col :span="2" style="padding-top: 5px;">
                    <span v-if="index === 0" style="color: gold;font-size: 20px;">{{ index + 1 }}</span>
                    <span v-if="index === 1" style="color: silver;font-size: 20px;">{{ index + 1 }}</span>
                    <span v-if="index === 2" style="color: coral;font-size: 20px;">{{ index + 1 }}</span>
                    <span v-if="index > 2" style="font-size: 20px;">{{ index + 1 }}</span>
                  </el-col>
                  <el-col :span="10">
                    <el-image :src="item.imgs[0]" style="width: 100%; height: 80px" fit="contain" class="saleImg"></el-image>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div style="overflow: hidden; height: 80px; font-size: 12px;margin-top: 5px;">
                      {{ item.description }}
                    </div>
                    
                  </el-col>
                </div>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <!-- 推荐明星周边 -->
        <el-col :span="18" style="height:650px">
          <el-card style="height:100%">
            <div style="padding: 10px 0; border-bottom: 2px solid #ee629e; font-size: 20px; color: #ee629e">
              推荐明星周边
            </div>
            <div style="padding: 10px 0">
              <el-row :gutter="15">
                <el-col :span="6" v-for="item in recommend"  style="margin-bottom: 10px">
                  <div style="border: 1px;border-radius: 5px; cursor: pointer; padding: 20px;margin-top:10px;box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1);"  
                  @click="goodsDetail(item.id)">
                    <el-image :src="item.imgs[0]" 
                    style="width: 100%; height: 150px" 
                    fit="contain"
                    class="recommendImg"></el-image>
                    <div style="padding: 5px; height: 20px; text-align: center; font-size: 12px; overflow: hidden">
                      <el-tooltip :content="item.name" placement="bottom" effect="light">
                        <span class="item-title">{{ item.name }}</span>
                      </el-tooltip>
                    </div>
                    <div style="padding: 5px; text-align: center; color: red; font-size: 12px">
                      ￥ {{ item.price }}
                    </div>
                  </div>
                </el-col>                
              </el-row>
            </div>
          </el-card>
        </el-col>

        
      </el-row>

    </div>

    <!-- 下部分 -->
    <div style="margin-top: 10px;height: 500px;">
      <el-card style="height:100%;">
        <!-- gutter栅格间隔 -->
        <el-row :gutter="10">
          <div style="padding: 10px 0; border-bottom: 2px solid #ee629e; font-size: 20px; color: #ee629e">明星周边分类</div>
          <!-- 分类 -->
          <el-col :span="4"> 
            <div style="border: 1px solid #ccc; text-align: center;margin-top: 20px;border-bottom: none;" >
              <div class="category-item" @click="getGoodsByCategory(item.id)" v-for="item in categories" :key="item.id"
                   :class="{ active: (activeIndex === item.id)}">{{item.name }}
              </div>
            </div>
          </el-col>

          <el-col :span="20" style="height:500px">
            <!-- 分类明星周边 -->
            <div style="margin-top: 20px;height: 70%;" >
              <el-row :gutter="10">
                <el-col :span="6" v-for="item in tableData" :key="item.id">
                  <div style="margin-bottom: 10px; cursor: pointer"  @click="goodsDetail(item.id)">
                    <div style="padding: 5px">
                      <el-image :src="item.imgs[0]" style="width: 100%; height: 100px" fit="contain"></el-image>
                    </div>
                    <div style="padding: 5px; height: 20px; text-align: center; font-size: 12px; overflow: hidden">
                      <!-- 用于展示鼠标 hover 时的提示信息 -->
                      <el-tooltip :content="item.name" placement="bottom" effect="light">
                        <span class="item-title">{{ item.name }}</span>
                      </el-tooltip>
                    </div>
                    <div style="padding: 5px; text-align: center; color: red; font-size: 12px">
                      ￥ {{ item.price }}
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 分类明星周边的分页 -->
            <div style="position:absolute;left: 50%;">
              <el-pagination
                  small
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-size="pageSize"
                  :page-sizes="[4, 8, 12]"
                  layout=" prev, pager, next"
                  :total="total"
              >
              </el-pagination>
            </div>

          </el-col>
        </el-row>
      </el-card>

    </div>
    
    <!-- 回到顶部 -->
    <div>
      <a href="#top" class="toTop">
        <img src="../../assets/top.png" alt="" style="height: 90%;text-align: center;">
      </a>
      
    </div>

  </div>
</template>

<script>
import API from "@/utils/request";

const url = "/api/video/"

export default {
  name: "Home",
  data() {
    return {
      sales: [],
      recommend: [],
      tableData: [],
      notice:[],
      activeIndex: 0,
      imgList: [],
      user: {},
      categories: [],
      pageNum: 1,
      pageSize: 8,
      total: 0
    };
  },
  created() {
    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    this.load()
  },
  methods: {
    toTop(){
      document.documentElement.scrollTop = 0;
    },
    goodsDetail(id) {
      this.$router.push({path: '/front/goods', query: {id: id}})
     
    },
    getGoodsByCategory(id) {
      this.activeIndex = id
      this.loadTable(id)
    },

    load() {
      API.get("/api/banner").then(res => {
        this.imgList = res.data
      })

      API.get("/api/notice/").then(res => {
        this.notice = res.data
      })

      API.get("/api/goods/recommend").then(res => {
        this.recommend = res.data

        this.recommend.forEach(item => {
          // 处理下表格的图片显示
          if (!item.imgs) {
            item.imgs = ['']
          } else {
            item.imgs = JSON.parse(item.imgs)
          }
        })
      })

      API.get("/api/goods/sales").then(res => {
        this.sales = res.data

        this.sales.forEach(item => {
          // 处理下表格的图片显示
          if (!item.imgs) {
            item.imgs = ['']
          } else {
            item.imgs = JSON.parse(item.imgs)
          }
        })
      })

      API.get("/api/category").then(res => {
        this.categories = res.data
        this.activeIndex = res.data[0].id
        this.loadTable(res.data[0].id)
      })
    },
    loadTable(categoryId) {
      API.get("/api/goods/byCategory/" + categoryId, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total

        this.tableData.forEach(item => {
          // 处理下表格的图片显示
          if (!item.imgs) {
            item.imgs = ['']
          } else {
            item.imgs = JSON.parse(item.imgs)
          }
        })
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.loadTable(this.categories[0].id)
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadTable(this.categories[0].id)
    }
  },
};
</script>

<style scoped>
.active {
  color: red !important;
  /* height: 50px;
  line-height: 40px; */
}

.category-item {
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
  color: #666;
  cursor: pointer;
  font-size: 16px;
}
.category-item:hover{
  color: rgb(229, 105, 105);
}
.line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-title {
  cursor: pointer;
}
.item-title:hover {
  color: orangered;
}

.saleImg:hover{
  transform: scale(1.2,1.2);
  /* box-shadow: 0 15px 30px  #ccc; */
}
/* .recommendImg:hover{
  box-shadow: 0 15px 30px  #ccc;
} */
.toTop{
  position: fixed;
  right: 45px;
  bottom: 100px;
  width: 40px;
  height: 40px;
  z-index: 99999999;
  box-shadow: 0px 0px 4px 4px #ecefef;
  border-radius: 600px;
  background-color: rgb(73, 172, 233);
}
.cardStyle{
  background-color: #FFFAF0;
}
</style>
